<template>
  <view :class="customClass">
    <view class="film-order-item flex">
      <view class="film-order-item_left" @click="handleClick">
        <view class="title">{{ obj.filmName || '--' }}</view>
        <view class="time fs22">{{ obj.sDate || '--' }} {{ obj.sTime || '--' }}</view>
        <view class="address fs22">{{ obj.cinemaInfo.cinemaName || '--' }}</view>
        <view class="number fs22">{{ obj.ticketNum || '--' }}张电影票</view>
      </view>
      <view class="film-order-item_right">
        <view class="order-status">
          {{ obj.showStatus | getModelValByKey('filmOrderStatus') }}
        </view>
        <template v-if="obj.autoTime !== '0'">
          <view class="film-order-item__label">
            <!-- <view class="film-order-item__icon"></view> -->
            <u-icon name="clock" color="#fff"></u-icon>
            <u-count-down format="DD:HH:mm:ss" auto-start millisecond @change="onChange" :time="obj.autoTime * 1000" @finish="refresh">
              <view class="time">
                <text class="white ml5"> {{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes }}:</text>
                <text class="white">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds }}</text>
              </view>
            </u-count-down>
          </view>
          <view class="film-order-item__btn" @click="onCancel">取消订单</view>
        </template>

        <zm-image custom-style="width:210rpx;height:210rpx" :src="obj.cover"></zm-image>
      </view>
    </view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  import { showModal, loading, toast, hideLoading } from '@/utils/message.ts'
  export default {
    name: 'film-order-item',
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      ZmImage
    },
    data() {
      return {
        timeData: {}
      }
    },
    methods: {
      handleClick() {
        this.$emit('click')
      },
      // 取消订单
      onCancel() {
        showModal('确定要取消该订单').then(() => {
          loading()
          const data = { orderId: this.obj.orderId }

          uni.$api.orderFilm.unLockSeat(data).then(() => {
            hideLoading()
            this.refresh()
            toast('操作成功')
          })
        })
      },
      onChange(e) {
        this.timeData = e
      },
      refresh() {
        this.$emit('refresh')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .film-order-item {
    background: #fff;
    border-radius: 20rpx;
    // overflow: hidden;
    position: relative;
    width: 100%;
    height: 210rpx;
    &::before {
      content: '';
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      top: 0;
      margin-top: -10rpx;
      right: 210rpx;
      margin-right: -10rpx;
      background: #f3f5f7;
      z-index: 100;
    }
    &::after {
      content: '';
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      bottom: 0;
      margin-bottom: -10rpx;
      right: 210rpx;
      margin-right: -10rpx;
      background: #f3f5f7;
      z-index: 100;
    }
    &_left {
      flex: 1;
      padding: 32rpx 30rpx;
      box-sizing: border-box;
      .title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
      }
      .time {
        color: #919191;
        margin-bottom: 6rpx;
      }
      .address {
        color: #919191;
        margin-bottom: 6rpx;
      }
      .number {
        color: #919191;
      }
    }
    &_right {
      width: 210rpx;
      height: 210rpx;
      position: relative;
      .order-status {
        border-radius: 0 20rpx 20rpx 0;
        width: 100%;
        height: 100%;
        line-height: 210rpx;
        text-align: center;
        background: rgba(10, 84, 98, 0.4);
        color: #fff;
        font-size: 36rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
    }
    &__label {
      position: absolute;
      top: 0;
      right: 0;
      padding: 8upx 14upx;
      display: flex;
      align-items: center;
      background: rgba(213, 173, 13, 0.8);
      border-radius: 0 0 0 10upx;
      z-index: 1;
      color: #fff;
    }
    &__icon {
      display: inline-block;
      margin-right: 9upx;
      width: 26upx;
      height: 26upx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-time.png) no-repeat;
      background-size: 100%;
    }
    &__btn {
      position: absolute;
      left: 50%;
      top: 70%;
      z-index: 999;
      transform: translateX(-50%);
      width: 120upx;
      height: 42upx;
      background: rgba(75, 207, 222, 0.8);
      border-radius: 16upx;
      text-align: center;
      line-height: 42upx;
      color: #fff;
    }
    .icon {
      position: absolute;
      top: 0;
      left: 0;
      color: white;
      font-size: 20rpx;
      background: #fba730;
      border-radius: 6rpx;
      padding: 3rpx 5rpx;
      // width: 96rpx;
      // height: 28rpx;
      // line-height: 28rpx;
      text-align: center;
    }
  }
</style>
